@()(implicit request: RequestHeader)
<style>


</style>
<div class="page-header navbar navbar-fixed-top">
		<!-- BEGIN HEADER INNER -->
	<div class="page-header-inner">
			<!-- BEGIN LOGO -->
		<div class="page-logo">
			<img src="@routes.Assets.at("images/logo.gif")" alt="logo" class="logo-default" height="31px">
			<div class="menu-toggler sidebar-toggler hide">
					<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
			</div>
		</div>
			<!-- END LOGO -->
			<!-- BEGIN RESPONSIVE MENU TOGGLER -->
		<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
		</a>
			<!-- END RESPONSIVE MENU TOGGLER -->
			<!-- BEGIN TOP NAVIGATION MENU -->
		<div class="top-menu">
			<ul class="nav navbar-nav pull-right">

				<li class="dropdown dropdown-user" id="showProject" style="display: none">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
						<i class="fa fa-database"></i>
						<span class="username username-hide-on-mobile" id="projectAbout">


						</span>
						<i class="fa fa-angle-down"></i>
					</a>
					<ul class="dropdown-menu" id="projects">
					</ul>
				</li>
				<li class="dropdown dropdown-user">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
						<span class="username username-hide-on-mobile">
						@request.session.get("projectName") </span>
						<i class="fa fa-angle-down"></i>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="@routes.ProjectController.logout()">
								<i class="fa fa-user"></i> 退出登录 </a>
						</li>
					</ul>
				</li>

			</ul>
		</div>
	</div>
</div>

<script>
		function diffMetaboliteIDFmt(value, row, index) {
			return "<a onclick=\"showDiffExp('" + escape(value) + "')\">" + value + "</a>"
		}

		function showDiffExp(value) {
			var html = "\t<div id='exp'><div id=\"addRelation\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n" +
					"\t\t\t\t\t\t\t\t\t<div class=\"modal-dialog\" style=\"width: 1070px\">\n" +
					"\t\t\t\t\t\t\t\t\t\t<div class=\"modal-content\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t<div class=\"modal-header bg-primary\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"></button>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t<span id=\"lblAddTitle\" style=\"font-weight: bold\">表达信息柱状图</span>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t</h4>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"modal-body\" align='center'>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"expCharts\" >\n" +
					"\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t</div></div>"
			var expHtml = $("#exp").html()
			if (typeof(expHtml) === "undefined") {
				$("body").append(html)
			}

			var index = layer.load(0, {shade: false})
			$.ajax({
				url: "@routes.MetaboliteController.plotDiffExp()",
				type: "post",
				data: {
					geneId: unescape(value),
					groupName: groupName
				},
				success: function (data) {
					layer.close(index)
					if (data.valid == "false") {
						$("#charts").html("没有图片结果生成！")
						swal("Error", data.message, "error")
					} else {
						$("#expCharts").html(data.div)
						$("#addRelation").modal("show")
					}
				}
			});
		}

		function showMExp(value) {
			var html = "\t<div id='exp'><div id=\"addRelation\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n" +
					"\t\t\t\t\t\t\t\t\t<div class=\"modal-dialog\" style=\"width: 1070px\">\n" +
					"\t\t\t\t\t\t\t\t\t\t<div class=\"modal-content\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t<div class=\"modal-header bg-primary\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"></button>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"modal-title\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t<span id=\"lblAddTitle\" style=\"font-weight: bold\">表达信息柱状图</span>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t</h4>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"modal-body\">\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"expCharts\"  style=\"width: 100%\">\n" +
					"\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t\t</div>\n" +
					"\t\t\t\t\t\t\t\t</div></div>"
			var expHtml = $("#exp").html()
			if (typeof(expHtml) === "undefined") {
				$("body").append(html)
			}

			var index = layer.load(0, {shade: false})
			$.ajax({
				url: "@routes.MetaboliteController.plotExp()",
				type: "post",
				data: {
					geneId: unescape(value)
				},
				success: function (data) {
					layer.close(index)
					if (data.valid == "false") {
						$("#charts").html("没有图片结果生成！")
						swal("Error", data.message, "error")
					} else {
						$("#expCharts").html(data.div)
						$("#addRelation").modal("show")
					}
				}
			});
		}


</script>